<template>
  <div class="setUserName">
    <van-nav-bar
      title="修改用户名"
      left-arrow
      @click-left="$router.back()"
      class="navBar"
    />

    <van-form class="from"  @submit='onSubmit'>
      <van-field
        v-model="username"
        placeholder="请输入用户名"
        :rules='rules'
      />
      <p class="hint" ref="hint">用户名只能修改一次（5-24字符之间）</p>
      <div>
        <van-button block type="info" native-type="submit" class="submit"
          >确 认 更 改</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { setAvatar } from "@/utils/storage";

export default {
  data() {
    return {
      username: "",
      rules:[
        { required: true },
        { pattern: /^\w{5,8}$/, message: '用户名格式错误' }
      ]
    };
  },
  methods: {
    // 更新用户名
    onSubmit(){
     setAvatar('userName',this.username)
     this.$toast.success('用户名修改成功!');
     this.$router.back()
    }
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.setUserName {
  /deep/.navBar {
    margin-bottom: 10px;
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-icon-arrow-left {
      font-size: 18px;
      color: #fff;
    }
  }
  .from {
    margin: 20px 10px;
    .hint {
      font-size: 12px;
      color: #666;
    }
    .van-field {
      border: 1px solid #ccc;
      background-color:#f5f5f5
    }
    .submit {
      margin-top: 20px;
      font-size: 18px;
    }
  }
}
</style>
